<template>
	<!-- 话题列表 -->
	<view class="page_body grey_bg">

		<!-- 搜索框 -->
		<view style="width: 700rpx;background-color: #FFFFFF;padding: 0 25upx 10px 25upx;height: 34px;">
			<u-search shape="round" inputAlign="center" v-model="queryForm.keyword" :showAction="queryForm.keyword?true:false" actionText="取消"
					 @change="getTopicList" @custom="cancelSearch"></u-search>
		</view>



		<view class="topic_type_content" >

			<!-- 左侧话题类型 -->
			<view class="topic_type_content_left">
				<scroll-view class="topic_type_scroll" scroll-y="true" show-scrollbar="false"
							:style="windowHeight?'height:'+ windowHeight +'px;':''">

					<text v-for="(t,index) in typeList" :key="index" @click="typeSelect(t.id)"
						:class="'topic_type_item '+ t.cssClass">
						{{t.name}}
					</text>

				</scroll-view>
			</view>

			<!-- 右侧话题列表 -->
			<view class="topic_type_content_right">

				<mescroll-uni  :height="windowHeight+'px'" @init="mescrollInit" :down="downOptions" :up="upOptions"
										@up="upBack">

					<view class="category_parent_box" v-for="(item, index) in dataList" :key="index" @click="selectTopic(item)">
						<view class="category_box">
							<image class="category_image" :src="item.cover" mode="aspectFill"></image>
							<view class="category_info_box">
								<text class="category_title"> {{item.name}} </text>
							</view>
						</view>
					</view>

					<no-data v-if="dataList.length < 1"  :height="windowHeight" icon="/static/bg/cat_qz.png" style="margin: 2px;"
							:iconMarginTop="100">
					</no-data>

				</mescroll-uni>
			</view>
		</view>


		<u-toast ref="uToast"></u-toast>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		components: {
			NoData
		},
		data() {
			return {
				downOptions: {
					use: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					// 是否启用上拉加载
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					toTop: {
						src: '/static/icon/icon_up2top.png',
						right: '20px',
						bottom: '60px',
						width: '40px',
						height: '40px',
						radius: '0px',
					}
				},
				// 页面高度
				windowHeight: null,
				// 表单
				queryForm: {
					// 当前页
					page: 1,
					// 分页大小
					size: 12,
					// 分类id
					typeId: '',
					// 名称
					keyword: ''
				},
				// 当前分类id
				currentType: '',
				// 话题分类列表
				typeList: [],
				// 数据列表
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,
			}
		},

		created() {
			const res = uni.getSystemInfoSync();
			this.windowHeight = res.windowHeight - 140
		},

		methods: {
			openCurrent(){
				this.queryForm.keyword = ''
				this.getTypeList()
				this.getTopicList()
			},
			// 获取话题分类
			getTypeList(){
				this.$httpApi.baseArticleGet('open/topic/type',{}).then(({ data }) => {
					if (data.code == "000000") {
						data.data.forEach(item=>{
							item.cssClass = ''
						})
						data.data.unshift({id:'',name: '推荐',cssClass: 'topic_type_item_active'});
						this.typeList = data.data
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {
				})
			},
			// 获取话题
			getTopicList() {
				this.loading = true
				this.queryForm.page = 1
				this.queryForm.size = 12
				this.$httpApi.baseArticleGet('open/topic/search', this.queryForm).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList = data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
						this.mescroll.endErr()
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多数据
			loadMoreData() {
				if(this.loading || this.noMore){
					return
				}
				let form = {
					page: this.queryForm.page + 1,
					size: this.queryForm.size,
					typeId: this.queryForm.typeId,
				}
				this.loading = true
				this.$httpApi.baseArticleGet('open/topic/search',form).then(({ data }) => {
					this.loading = false
					if (data.code == "000000") {
						if(data.data.records && data.data.records.length > 0){
							this.queryForm.page += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			cancelSearch(){
				this.queryForm.keyword = ''
				this.getTopicList()
			},
			// 话题类型选中
			typeSelect(id){
				this.$nextTick(()=>{
					this.queryForm.typeId = id;
					this.getTopicList();
					this.typeList.forEach(item =>{
						if (item.id == id){
							item.cssClass = 'topic_type_item_active';
						}else{
							item.cssClass = ''
						}
					})
				})
			},
			// 话题选中
			selectTopic(item){
				this.$emit('selectTopicBack',item)
			},
			/**
			 * 上拉加载的回调
			 */
			upBack(page) {
				if (!this.loading && !this.noMore) {
					this.loadMoreData()
				}else{
					this.mescroll.endErr()
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.topic_type_content {
		display: flex;
		flex-direction: row;
		padding-top: 3px;
	}

	// 左部分类
	.topic_type_content_left {
		background-color: #FFFFFF;
		width: 160upx;
	}
	// 左部分类滚动
	.topic_type_scroll {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-right: 5px;
	}
	// 左部分类
	.topic_type_item {
		display: flex;
		flex-flow: column;
		line-height: 40px;
		width: 160rpx;
		height: 40px;
		font-size: 16px;
		color: #666666;
		text-align: center;

	}
	// 左部分类激活
	.topic_type_item_active {
		background-color: #55aaff;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
		color: #FFFFFF;
		font-weight: 500;
		background-image: linear-gradient(45deg, #55aaff, #1cbbb4);
	}
	// 右部列表
	.topic_type_content_right {
		flex: 1;
	}
	// 话题显示样式
	.category_parent_box {
		display: flex;
		flex-flow: column;
		margin-left: 2px;
		padding: 4px 12px 4px 6px;
		background-color: #FFFFFF;
		margin-bottom: 2px;
	}

	.category_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	// 话题图片
	.category_image {
		width: 54px;
		height: 54px;
		border-radius: 10px;
		margin-top: 4px;
		margin-right: 10px;
		margin-left: 2px;
	}

	// 话题信息
	.category_info_box {
		display: flex;
		flex-flow: column;
		flex: 1;
		justify-content: center;
	}

	// 话题名称
	.category_title {
		font-size: 16px;
		color: #333333;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}


	.loadmore-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		background-color: #FEFEFE;
	}

	.refresh-img {
		height: 90px;
		width: 120px;
	}
</style>
